require(["./config"], () => {
    require(["template","url","header","footer","main","fly"], (template,url,header) =>{
        class Index {
            constructor (){
            //    this.$glass = $(".glass")
            //    this.$span = $(".glass span")
            //    this.event();
               this.getData().then(() =>{
                   this.detailRender();
                   this.event();
                   this.addToNum();
                   this.changePhoto();
               })
            }
            //放大镜
           event () {
                this.$glass = $(".glass")
               this.$span = $(".glass span")
               this.$glass.hover(() => {
                   this.$span.show();
                   $(".bigGlass").show();
               },() => {
                this.$span.hide();
                $(".bigGlass").hide();
           })
           this.$glass.on("mousemove",(e) => { //鼠标移动事件
               var left=e.pageX-this.$glass.offset().left;
               var top=e.pageY-this.$glass.offset().top
               left-=this.$span.outerWidth()/2;
               top-=this.$span.outerHeight()/2;
               this.move(left,top) //传left 跟top 的值到move中
           })
        }
           move(left,top){
            if(left<0)left=0
            if(top<0)top=0
            if(left>(this.$glass.outerWidth()-this.$span.outerWidth())){left=this.$glass.innerWidth()-this.$span.outerWidth()}
            if(top>(this.$glass.outerHeight()-this.$span.outerHeight())){top=this.$glass.outerHeight()-this.$span.outerHeight()}
            this.$span.css({left,top})
            $(".bigGlass img").css({left:-1.6*left,top:-2*top})
           }
        
           getData () { // 从地址拉拿id
            const id = window.location.search.slice(1).split('&').reduce((obj,item) => {
                var arr=item.split('=')
                obj[arr[0]]=arr[1]
                return obj
            },{}).id
            this.id = Number(id)
            return new Promise(resolve => {
             $.get(`${url.rap2}/api/detail`, { id: this.id }, resp => { //从rap2拿数据 
                 if (resp.code === 200) {
                     const { detail } = resp.body
                     this.detail = { ...detail, id: this.id }
                     resolve()
                 }
                 console.log(resp)
             })
         })
         }
         detailRender(){   //模板渲染 放入html中
            let hh = template('detailTemplate', {
                ...this.detail
            })
            $('main').html(hh)
         }
         addToNum (){
            $(".add-btn").on("click",(e) => {
                this.fly(e)
                let cart = localStorage.getItem("cart")
                if(cart){
                    cart = JSON.parse(cart)
                    const donHave =cart.some(shop => {
                        return shop.id ===this.detail.id
                    })
                    if(donHave){
                        cart = cart.map(shop =>{
                            if(shop.id === this.detail.id){
                                shop.count++
                            }
                            return shop
                        })
                    }else{
                        cart.push({
                            ...this.detail,
                            count:1,
                            checked:true
                        })
                    }
                    localStorage.setItem("cart",JSON.stringify(cart))
                }else{
                    localStorage.setItem("cart",JSON.stringify([{
                        ...this.detail,
                        count:1,
                        checked:true
                    }]))
                } 
            })
         }
         fly (e) {
            $(`<img src="${this.detail.imgs[0]}" style="width: 50px;height: 50px;border-radius:50%">`).fly({
                start:{
                  left: e.clientX,  
                  top: e.clientY,  
                },
                end:{
                  left: $('#cart').offset().left - $(window).scrollLeft(), 
                  top: $('#cart').offset().top - $(window).scrollTop() 
                },
                speed: 1.1,
                vertex_Rtop: 100,
                onEnd: function () {
                    this.destroy()
                    header.headerCart()
                }
              })
        }
        changePhoto () {
            $(".smallPhoto p img").each(function(){
                $(this).on("click", () =>{
                    $(".bigPhoto").attr('src', $(this).attr('src'))
                    })
            })
            $(".smallPhoto p img").each(function(){
                $(this).on("click", () =>{
                    $(".changeGlass").attr('src', $(this).attr('src'))
                    })
            })
        }
        }

        new Index ()
    })
})